<template>
	<view class="">
		<!-- 活动列表信息 -->
		<view class="active-list">

			<view class="active-head">
				<view class="head-img">
					<img :src="userInfo.head" alt="">
				</view>
				<view class="active-name-info">
					<view class="active-name">
						{{userInfo.name}}
					</view>
					<view class="active-introduce">
						{{userInfo.position}}
					</view>
				</view>
			</view>
			<view class="fromWp">
				<u--form labelPosition="left" :model="formData" :rules="rules" ref="form" labelWidth='180'
					labelAlign='left' :labelStyle="{marginLeft: '10px'}">
					<u-form-item label="时间" prop="time" borderBottom required class='formItemWp' @click="startClick">
						<u--input v-model="formData.time" border="none" placeholder='请选择提醒时间' readonly> </u--input>
					</u-form-item>
					<u-form-item label="标题" prop="title" borderBottom required class='formItemWp'>
						<u--input v-model="formData.title" border="none" placeholder='请输入标题'></u--input>
					</u-form-item>
					<u-form-item label="内容" prop="content" borderBottom required class='formItemWp'>
						<u--textarea v-model="formData.content" placeholder="请输入内容" confirmType='done'>
						</u--textarea>
					</u-form-item>
					<!-- <view class="paddingWp">
					</view> -->
					<view class="introductionWp">
						<text class="introductionposition">
							上传图片
						</text>
						<u-upload :fileList="fileListImg" @afterRead="afterRead" @delete="deletePic" name="Img"
							:multiple='true' :maxCount="3">
							<view class="uploadWp">
								<u-icon name="plus" color="#423CFE" size="90"></u-icon>
							</view>
						</u-upload>
					</view>
				</u--form>
				<view class="submitWp">
					<u-button @click="submit" color="#423CFE" shape="circle">保存</u-button>
				</view>

			</view>
		</view>
		<u-datetime-picker :show="timeShow" v-model="startTimeValue" mode="datetime" @confirm="startTimeConfirm"
			@cancel="startTimeClose"></u-datetime-picker>
	</view>
</template>

<script>
	import baseConfig from '@/config/baseUrl.js'
	import {
		mapState
	} from 'vuex'
	export default {
		data() {
			return {
				formData: {
					title: '',
					content: '',
					time: '',

				},
				rules: {
					title: [{
						required: true,
						message: '请输入标题',
						trigger: ['change', 'blur'],
					}],
					content: [{
						required: true,
						message: '请输入内容',
						trigger: ['change', 'blur'],
					}],
					time: [{
							required: true,
							message: '请选择时间',
							trigger: ['blur'],
						}

					]
				},
				startTime: "请选择开始时间",
				//上传图片显示
				fileListImg: [],
				// 开始时间事件显示隐藏
				timeShow: false,
				startTimeValue: Number(new Date()),
			}
		},
		onReady() {
			// 如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则
			this.$refs.form.setRules(this.rules)
		},
		computed: {
			...mapState(['userInfo'])
		},
		onShow() {

		},
		methods: {

			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
			},
			// 新增图片
			async afterRead(event) {
				console.log('新增图片', event);
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: event.name,
						url: result,
						fileName: event.file[0].type + event.file[0].size + '',
						filePath: result
					}))
					fileListLen++
				}
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: baseConfig.uploadUrl + '/casugn-system/sys/common/upload',
						filePath: url,
						name: 'file',
						success: (res) => {
							let data = JSON.parse(res.data)
							if (data.success) {
								resolve(data.message)
							}
						}
					});
				})
			},
			// 时间戳转yy-mm-dd hh-mm-ss
			shijianc(time) {
				var date = new Date(time)
				console.log("测试" + date)
				var Y = date.getFullYear() + '-'
				var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'
				var D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' '
				var h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':'
				var m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes())
				// + ':'
				var s = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds())
				return Y + M + D + h + m
			},
			// 开始时间选择
			startClick() {
				this.startTimeValue = Number(new Date().getTime())
				this.timeShow = true
			},
			// 开始时间时间确认
			startTimeConfirm(val) {
				this.formData.time = this.startTime = this.shijianc(val.value)
				this.timeShow = false

			},
			// 开始时间取消选择
			startTimeClose() {
				this.timeShow = false
			},
			// 提交活动
			submit() {
				let openId = uni.getStorageSync('openId')
				console.log("这是openId", openId)
				let cardId = uni.getStorageSync('cardId')
				console.log("这是cardId", cardId)
				this.$refs.form.validate().then(res => {
					let payload = {
						openId: openId.openid,
						cardId,
						...this.formData,
						imgUrl: this.fileListImg
					}
					console.log(payload, 'paload');
				}).catch(errors => {
					console.log(errors);
					uni.$u.toast('校验失败')
				})

			}
		}
	}
</script>

<style lang="scss" scoped>
	.paddingWp {
		margin-top: 40upx;
		width: 100%;
		height: 40upx;
		background-color: #F8F9FF;
	}

	.fromWp {
		.uploadWp {
			border: 1px dotted #423CFE
		}

		.introductionWp {
			padding: 20upx 0;
			display: flex;
			align-items: center;

			.introductionposition {
				margin-right: 30upx;
			}
		}


	}

	.active-list {
		background: #FFFFFF;
		border-bottom: 1upx solid #EEEEEE;
		padding: 41upx 30upx 100upx;
		position: relative;

		.active-status {
			position: absolute;
			width: 140upx;
			height: 130upx;
			top: 38upx;
			right: 29upx;

			img {
				width: 140upx;
				height: 130upx;
			}
		}

		.active-head {
			padding: 37upx 0;
			display: flex;
			border-bottom: 1upx solid #EEEEEE;
			letter-spacing: 3upx;

			.head-img {
				width: 72upx;
				height: 72upx;
				border-radius: 50%;

				img {
					width: 72upx;
					height: 72upx;
					margin-top: 1upx;
				}
			}

			.active-name-info {
				margin-left: 21upx;

				.active-name {
					font-size: 30upx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #000000;
				}

				.active-introduce {
					margin-top: 19upx;
					font-size: 24upx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #999999;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					width: 400upx;
				}
			}
		}

		.active-title {
			display: flex;
			// jus
			letter-spacing: 3upx;
			// margin-top: 30upx;
			font-size: 30upx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #666666;
			height: 110upx;
			line-height: 110upx;
			border-bottom: 1upx solid #EEEEEE;

			.active-text {
				color: #000000;
			}
		}

		.active-time {

			.start-time,
			.end-time {
				font-size: 24upx;
				color: #000000;
			}
		}

		.active-content {
			display: flex;
			// line-height: 48upx;
			letter-spacing: 3upx;
			// margin-top: 30upx;
			font-size: 30upx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #666666;
			// height: 110upx;
			line-height: 50upx;
			padding: 37upx 0;
			border-bottom: 1upx solid #EEEEEE;

			::v-deep .u-textarea {
				padding: 5upx !important;
			}

			.active-text {
				color: #000000;
			}
		}

		.active-info {
			border-bottom: 1upx solid #EEEEEE;
			padding: 37upx 0;

			.active-info-img {
				margin: 0 auto;
				// margin-top: 30upx;
				width: 690upx;
				height: 350upx;
				border-radius: 30upx;
				position: relative;
				overflow: hidden;

				// border-bottom: 1upx solid #EEEEEE;
				img {
					width: 690upx;
					height: 350upx;
				}

				.active-info-mask {
					position: absolute;
					width: 690upx;
					height: 70upx;
					bottom: 0;
					background: linear-gradient(0deg, #000000 0%, rgba(0, 0, 0, 0.1000) 100%);
					line-height: 70upx;
					font-size: 24upx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #FFFFFF;
					text-align: center;
				}
			}
		}

		.active-select-address {
			display: flex;
			// justify-content: space-between;
			height: 110upx;
			line-height: 110upx;
			align-items: center;
			position: relative;

			.address-pick {
				width: 590upx;
				// background: red;
				font-size: 24upx;

				text {
					margin-left: 8upx;
				}
			}

			.active-select-icon {
				position: absolute;
				top: 50%;
				transform: translateY(-12upx);
				right: 10upx;
				width: 21upx;
				height: 24upx;
			}
		}

		.active-address {
			height: 110upx;
			line-height: 110upx;
			border-bottom: 1upx solid #EEEEEE;
			// margin-top: 30upx;
			letter-spacing: 3upx;
			display: flex;
			justify-content: space-between;
			align-items: flex-end;

			.active-title {
				border-bottom: none;

				.active-text {
					color: #413BF3;
				}

			}


		}

		.avatar {
			padding: 37upx;
			flex: 1;
			display: flex;
			justify-content: space-between;
			border-bottom: 1upx solid #EEEEEE;

			.avatar-img {
				img {
					width: 60upx;
					height: 60upx;
					margin: 0 -15upx;
				}
			}

			.avatar-num {
				font-size: 24upx;
				font-family: PingFang SC;
				line-height: 60upx;
				font-weight: 400;
				color: #413BF3;

				.avatar-num-right {
					margin-right: 10upx;
				}

			}

		}

		.sign-up {
			margin-top: 120upx;
		}

		::v-deep .u-upload__deletable {
			right: 20upx;
			top: 20upx;
			width: 20upx;
			height: 20upx;
			text-align: center;
			border-bottom-left-radius: 0;

			// background: transparent;
			.u-icon--right {
				text {
					font-size: 30upx !important;
					top: 7upx !important;
					left: 6upx !important;
				}
			}
		}
	}
</style>
